<template>
	<view>
		<view class="flex j-c p2 cff">
			请在方框内写下你的签名
		</view>

		<view class="p2" style="margin-top: -20rpx;">
			<canvas class='firstCanvas' canvas-id="firstCanvas" @touchmove='move' @touchstart='start($event)'
				@touchend='end' @touchcancel='cancel' @longtap='tap' disable-scroll='true' @error='error'>
			</canvas>
		</view>

		<view class="flex a-c" style="padding: 0 10rpx;">

			<button style="width: 30%;font-size: 30rpx;" id="shareBtn" open-type="share">分享</button>

			<button style="width: 30%;font-size: 30rpx;" @click='clearClick'>重写</button>
			<button style="width: 30%;background-color: #3BB77E;color: #fff;font-size: 30rpx;"
				@click='saveClick'>保存到相册</button>
		</view>
		<view class="" style="padding: 40rpx 30rpx;">
			<view class="cff flex a-c">
				<text>字体颜色</text>
				<view class="  flex a-c">
					<view @click="on_color(item)" class="flex a-c j-c color-list" v-for="(item,index) in color_list"
						:key="index" :style="'background-color: ' +  item">
						<text v-if="color_index==item" style="font-size: 40rpx;">√</text>
					</view>
				</view>
			</view>
			<view class="cff flex a-c pt2">
				<text>字体粗细</text>
				<view style="width: 400rpx;margin-left: 20rpx;">
					<yichan-movable-area :max="10" :min="1" :defaultValue="score" @change="onChange1" />
				</view>
				<text class="ml2">{{score}}</text>
			</view>
		</view>

		<ad :unit-id="weixin_banner_ad"></ad>


		<tabbar></tabbar>
	</view>

</template>

<script>
	import YiChanMovableArea from '@/components/yichan-movable-area/yichan-movable-area.vue';
	var content = null;
	var touchs = [];
	var canvasw = 0;
	var canvash = 0;
	//获取系统信息
	uni.getSystemInfo({
		success: function(res) {
			canvasw = res.windowWidth;
			canvash = canvasw * 9 / 16;
		},
	})
	export default {
		components: {
			YiChanMovableArea,
		},
		data() {
			return {
				signImage: '',
				color_list: ["#000", "#FE0000", "#CD3301", "#663200", "#336601", "#003466"],
				color_index: "#000",
				score: 5,
				weixin_banner_ad: ""


			}
		},
		onShareAppMessage(res) {
			return {
				title: "电子手写签名",
				path: '/pages/dianzishouxieqianming/index/index'
			}
		},

		onShareTimeline(res) {
			return {
				title: "电子手写签名",
				path: '/pages/dianzishouxieqianming/index/index'
			}
		},
		onLoad() {
		 this.set_firstCanvas()
			 
		},
		watch: {
			get_plugin_set: {
				handler: function(newVal, oldVal) {
					if (newVal != 0) {

						this.weixin_banner_ad = newVal.weixin_banner_ad
						 
						
						 

					}
				},
				immediate: true
			}
		},
		methods: {
			onChange1(score) {
				this.score = score
				this.set_firstCanvas()
			},
			on_color(item) {
				this.color_index = item
				this.set_firstCanvas()
			},

			start: function(e) {
				let point = {
					x: e.touches[0].x,
					y: e.touches[0].y,
				}

				touchs.push(point);

			},

			move: function(e) {
				let point = {
					x: e.touches[0].x,
					y: e.touches[0].y
				}
				touchs.push(point)
				if (touchs.length >= 2) {
					this.draw(touchs)
				}
			},


			end: function(e) {

				for (let i = 0; i < touchs.length; i++) {
					touchs.pop()
				}

			},


			cancel: function(e) {

			},

			// 画布的长按手势响应
			tap: function(e) {

			},

			error: function(e) {

			},

			//绘制
			draw: function(touchs) {
				let point1 = touchs[0]
				let point2 = touchs[1]
				touchs.shift()
				content.moveTo(point1.x, point1.y)
				content.lineTo(point2.x, point2.y)
				content.stroke()
				content.draw(true)
			},
			//清除操作
			clearClick: function() {

				content.clearRect(0, 0, canvasw, canvash)
				content.draw(true)
				this.set_firstCanvas()
			},
			//保存图片
			saveClick: function() {
				var that = this
				uni.canvasToTempFilePath({
					canvasId: 'firstCanvas',
					success: function(res) {


						// 保存图片到相册
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function() {
								console.log('图片保存成功');
								uni.showToast({
									title: "图片保存成功",
									icon: 'none'
								})
								// 成功处理逻辑
							},
							fail: function(err) {
								console.log('图片保存失败', err);
								// 失败处理逻辑
							}
						});
					}
				})

			},
			set_firstCanvas() {
				//获得Canvas的上下文
				content = uni.createCanvasContext('firstCanvas')
				//设置线的颜色
				content.setStrokeStyle(this.color_index)
				//设置线的宽度
				content.setLineWidth(this.score)
				//设置线两端端点样式更加圆润
				content.setLineCap('round')
				//设置两条线连接处更加圆润
				content.setLineJoin('round')
			}






		},





	}
</script>

<style>
	page {
		background-color: #000;
	}

	.color-list {
		border: solid 5rpx #fff;
		border-radius: 99rpx;
		width: 50rpx;
		height: 50rpx;
		margin-left: 20rpx;
	}

	content {
		width: 100%;
		height: 500px;
	}

	.firstCanvas {
		background-color: #fff;
		width: 100%;
		height: 200px;
	}
</style>